<template>
  <div class="df main">
    <div class="df fdc left-menu">
      <p class="df aic jcc">收藏</p>
      <input class="searchIpt" style="padding: 10px; border: 1px solid #c0c4cc; border-radius: 4px;"  @keydown="keyDown" v-model="searchIpt" placeholder="支持自然语言搜索" />
      <!-- <p class="mention-text">支持自然语言搜索</p> -->
      <div class="df jcsb aic">
        <p class="time-text">今天</p>
        <el-select
          v-model="searchOption"
          placeholder="请选择"
          style="width: 140px"
          @change="sourceOptionsChange"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
      <br />
      <el-skeleton
        v-show="beginDell"
        animated
        class="skeleton"
        style="
          --el-skeleton-circle-size: 100px;
          padding: 10px;
          margin-bottom: 20px;
        "
      >
        <template #template>
          <div class="df aic jcsb bb2b">
            <el-skeleton-item
              style="border-radius: 0; width: 70%; height: 25px"
              variant="rect"
            />
            <p class="sk-text">处理中</p>
          </div>
          <div class="df aic mt20">
            <el-skeleton-item
              style="
                border-radius: 0;
                width: 50px;
                height: 15px;
                margin-right: 20px;
              "
              variant="rect"
            />
            <el-skeleton-item
              style="border-radius: 0; width: 50px; height: 15px"
              variant="rect"
            />
          </div>
          <el-skeleton-item
            style="
              border-radius: 0;
              width: 100%;
              height: 15px;
              margin-top: 20px;
            "
            variant="rect"
          />
        </template>
      </el-skeleton>
      <el-scrollbar ref="scorllContainer" @scroll="beginScroll" class="f1">
        <div class="collectionitem" v-for="item in results" :key="item">
          <div class="df jcsb bb2d">
            <p style="font-weight: 600; width: 70%">{{ item.title }}</p>
            <!-- <img v-show="item.url" class="right-icon" :src="item.url" alt="" /> -->
            <p v-show="item.source_platform_str">{{ item.source_platform_str }}</p>
          </div>
          <div class="df fdc jcsb">
            <div style="position: relative;" class="w100 df mt10 jcsb">
              <el-tabs v-model="item.activeName" type="card" class="demo-tabs f1">
                <el-tab-pane label="处理结果" name="first">
                  <div>
                    <!-- <p class="mr10">内容摘要</p> -->
                    <p @click="copyText(item.summary)" style="white-space: pre-line;color:#303133;">{{ item.summary }}</p>
                  </div>
                </el-tab-pane>
                <el-tab-pane label="基础信息" name="second">
                  <div class="df w100">
                    <p style="width: 70px;" class="mr10">搜索内容:</p>
                    <p  @click="copyText(item.baseInfo)" style="width: 70%;word-wrap:break-word;word-break:normal;" :title="item.baseInfo">{{ item.baseInfo }}</p>
                  </div>
                  <div
                    v-show="JSON.stringify(item.location) !== '{}'"
                    class="df "
                  >
                    <p style="width: 70px;" class="mr10">地理位置:</p>
                    <p   @click="copyText(item.location.name)" :title="item.location.name"  style="width: 70%;word-wrap:break-word;word-break:normal;">{{ item.location.name }}</p>
                  </div>
                  <div v-show="JSON.stringify(item.calendar_event) !== '{}'" class="df">
                    <p style="width: 70px;" class="mr10">日历信息:</p>
                    <p  @click="copyText(item.calendar_event.festival)" :title="item.calendar_event.festival"  style="width: 70%;word-wrap:break-word;word-break:normal;">
                      {{ item.calendar_event.festival}}
                    </p>
                  </div>
                  <div v-show="item.calendar_event" class="df">
                    <p style="width: 70px;" class="mr10">创建时间:</p>
                    <p @click="copyText(trans(item.create_time))" :title="trans(item.create_time)" style="width: 70%;word-wrap:break-word;word-break:normal;">
                      {{ trans(item.create_time)}}
                    </p>
                  </div>
                  <div v-show="item.source_platform" class="df">
                    <p style="width: 70px;" class="mr10">来源:</p>
                    <p  @click="copyText(item.source_platform_text)" :title="item.source_platform_text" style="width: 70%;word-wrap:break-word;word-break:normal;">
                      {{ 
                        item.source_platform_text
                      }}
                    </p>
                  </div>
                  <div v-show="item.publish_time" class="df aic">
                    <p style="width: 70px;" class="mr10">发布时间:</p>
                    <p  @click="copyText(trans(item.publish_time))" :title="trans(item.publish_time)" style="width: 70%;word-wrap:break-word;word-break:normal;">
                      {{ 
                        trans(item.publish_time)
                      }}
                    </p>
                  </div>
                  <div v-show="item.user_prompt" class="df aic">
                    <p style="width: 70px;" class="mr10">用户需求:</p>
                    <p @click="copyText(item.user_prompt)" :title="item.user_prompt" style="width: 70%;word-wrap:break-word;word-break:normal;">
                      {{ 
                        item.user_prompt
                      }}
                    </p>
                  </div>
                  <div v-show="item.author" class="df aic">
                    <p style="width: 70px;" class="mr10">作者:</p>
                    <p @click="copyText(item.author)" :title="item.author" style="width: 70%;word-wrap:break-word;word-break:normal;">
                      {{ 
                        item.author
                      }}
                    </p>
                  </div>
                  <div v-show="item.source_platform_str" class="df aic">
                    <p style="width: 70px;" class="mr10">发布平台:</p>
                    <p @click="copyText(item.source_platform_str)"  :title="item.source_platform_str" style="width: 70%;word-wrap:break-word;word-break:normal;">
                      {{ 
                        item.source_platform_str
                      }}
                    </p>
                  </div>
                  <div v-show="item.content_category" class="df aic">
                    <p style="width: 70px;" class="mr10">内容分类:</p>
                    <p @click="copyText(item.content_category)" :title="item.content_category" style="width: 70%;word-wrap:break-word;word-break:normal;">
                      {{ 
                        item.content_category
                      }}
                    </p>
                  </div>
                  <div v-show="item.key_personnel" class="df aic">
                    <p style="width: 70px;" class="mr10">关键人物:</p>
                    <p @click="copyText(item.key_personnel)" :title="item.key_personnel" style="width: 70%;word-wrap:break-word;word-break:normal;">
                      {{ 
                        item.key_personnel
                      }}
                    </p>
                  </div>
                  <div
                    v-show="JSON.stringify(item.weather) !== '{}'"
                    class="df aic"
                  >
                    <p style="width: 70px;" class="mr10">天气/温湿度:</p>
                    <p @click="copyText(item.weather.condition +'/'+item.weather.temperature +'°C' +'    ' +item.weather.humidity)" style="width: 70%;">
                      {{
                        item.weather.condition +
                        "/" +
                        item.weather.temperature +
                        "°C" +
                        "   " +
                        item.weather.humidity
                      }}
                    </p>
                  </div>
                  
                </el-tab-pane>
              </el-tabs>
              <el-button style="position: absolute;right: 0;top: 0;" @click="talkAbout(item)">讨论一下</el-button>
            </div>
            <!-- <div class="df">
              <p class="mr10">处理结果</p>
              <p>基础信息</p>
            </div>
             -->
          </div>
        </div>
      </el-scrollbar>
    </div>
    <div class="f1 right-main">
      <el-card class="w100 h100 df aic jcc">
        <div style="position: relative" class="w100 df aic jcc h100">
          <el-button
            @click="backFirstChat"
            v-show="!mainTopShow"
            style="position: absolute; left: 10px; top: 10px"
            >返回</el-button
          >
          <div style="width: 70%" class="df h100 fdc jcsb">
            <div v-show="mainTopShow">
              <img class="right-bg" src="" alt="" />
              <p class="w100 df aic jcc">
                {{ roastsText }}
              </p>
              <div class="w100 df aic jcc">
                <div>
                  <el-radio-group
                    v-model="radio1"
                    @change="radiochange"
                    size="large"
                  >
                    <el-radio-button class="mr20" label="上传收藏" value="1" />
                    <el-radio-button label="知识聊天" value="2" />
                  </el-radio-group>
                </div>
              </div>
            </div>
            <div class="df aic" v-show="!mainTopShow">
              <h3>{{ topData.title }}</h3>
              <p style="color: #ccc">{{ topData.zy }}</p>
            </div>
            <!-- 聊天内容 -->
            <div
              style="overflow-y: scroll; max-height: 400px"
              ref="scorllContainer"
            >
              <div v-show="radio1 == 2">
                <div class="df" v-for="item in messageInfo" :key="item">
                  <!-- 用户发送的问题 -->
                  <div
                    v-show="item.userText"
                    style="justify-content: flex-end"
                    class="w100 df aic mt10 mb10"
                  >
                    <div
                      style="justify-content: flex-end"
                      class="df message-box"
                    >
                      {{ item.userText }}
                    </div>
                    <img
                      style="width: 40px; height: 40px; margin-left: 20px"
                      src="@/assets/bg/logoAvatar.png"
                      alt=""
                    />
                  </div>
                  <!-- 机器回答的问题 -->
                  <div
                    v-show="item.answerText"
                    :key="item"
                    style="justify-content: flex-start"
                    class="w100 df mt10 mb10"
                  >
                    <img
                      style="width: 40px; height: 40px; margin-right: 20px"
                      src="@/assets/bg/logoAvatar.png"
                      alt=""
                    />
                    <div
                      style="justify-content: flex-start"
                      class="df message-box"
                    >
                      {{ item.answerText }}
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- 上传收藏 -->
            <div>
              <div class="df fdc chat-container">
                <div style="position: relative" class="bb2d mb10 df aic jcsb">
                  <div class="f1">
                    <input
                      v-model="collectionInfo"
                      class="w100 collection-ipt"
                      type="text"
                      v-show="radio1 == 1 && (active == 1 || active == 2)"
                    />
                    <el-input
                      v-model="userSendMessage"
                      :rows="2"
                      v-show="radio1 == 2"
                      type="textarea"
                      placeholder="请输入"
                      class="w100"
                      :class="isFocus ? 'focus' : ''"
                      @focus="isFocus = true"
                      @blur="isFocus = false"
                    />
                  </div>
                  <div></div>

                  <div class="ml40">
                    <div class="df" v-show="radio1 == 1">
                      <i
                        @click="activeText"
                        :class="textIcon"
                        class="iconfont mr20 icon-wenzi"
                      ></i>
                      <i
                        @click="activeLink"
                        :class="linkIcon"
                        style="font-size: 18px"
                        class="iconfont fw700 mr20 icon-icon-link-copy"
                      ></i>
                      <el-upload
                        v-model:file-list="fileList"
                        accept="image/*"
                        ref="uploadRef"
                        class="upload-demo"
                        action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                        :auto-upload="false"
                        :limit="1"
                        :on-change="handleChange"
                      >
                        <template #trigger>
                          <i
                            @click="activePic"
                            :class="picIcon"
                            class="iconfont icon-tupian"
                          ></i>
                        </template>
                      </el-upload>
                    </div>

                    <el-button
                      :loading="sendLoading"
                      v-show="radio1 == 2"
                      @click="sendMessage"
                      >发送</el-button
                    >
                  </div>
                </div>
                <p
                  style="
                    padding: 0 0 5px 0;
                    margin: 0;
                    color: #a8abb2;
                    font-size: 14px;
                  "
                  v-show="radio1 == 1"
                >
                  处理要求
                </p>
                <div v-show="radio1 == 1 " class="df w100 jcsb">
                  <div style="position: relative" class="f1 mr20">
                    <el-input
                      v-model="userPrompt"
                      placeholder="分析上传的内容，提炼摘要，整理笔记，并给出你的客观评价"
                    ></el-input>
                    <el-checkbox
                      style="position: absolute; right: 10px; top: 0"
                      v-model="checked1"
                      label="保存该处理要求"
                    />
                  </div>
                  <el-button :loading="beginDell" @click="chatBegin"
                    >开始处理</el-button
                  >
                </div>
              </div>
            </div>
            <!-- 知识聊天 -->
            <div></div>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, reactive } from "vue";
import { getCollections, getText,uploadImg,imgAs,getUrl,roasts } from "@/apis/content";
import { ElMessage } from "element-plus";
import { trans } from "@/utils/transforDate";
import useClipboard from 'vue-clipboard3'

const {toClipboard} = useClipboard()

const searchOption = ref(0);
const options = ref([
  {
    label: "全部来源",
    value: 0,
  },
  {
    label: "用户上传",
    value: 1,
  },
  {
    label: "微信公众号",
    value: 2,
  },
  {
    label: "BiliBili哔哩哔哩",
    value: 3,
  },
  {
    label: "小红书",
    value: 4,
  },
  {
    label: "抖音",
    value: 5,
  },
  {
    label: "其他",
    value: 6,
  },
]);
const results = ref([]);
const checked1 = ref("");
const radio1 = ref("1");
const textIcon = ref("normal");
const linkIcon = ref("normal");
const picIcon = ref("normal");
const collectionInfo = ref("");
const userPrompt = ref("");
const backMessage = ref("");
const userSendMessage = ref("");
const isFocus = ref(false);
const messageInfo = ref([]);
const sendLoading = ref(false);
const scorllContainer = ref();
const beginDell = ref(false);
const active = ref(1);
const mainTopShow = ref(true);
const topData = ref({});
const fileList = ref([]);
const searchIpt = ref('')
const imgDataUrl = ref('')
const roastsText = ref('')
let tempcollectionId = ref(0)
// const sourceOptions = ref(0)


const getRoasts = async()=>{
  try{
    let roastsRes = await roasts()
    if(roastsRes.data.code == 200){
      roastsText.value = roastsRes.data.data.msg
    }
  }catch(e){
    ElMessage.error("错误，请检查输入或稍后再试");
  }
}
// 获取收藏列表数据
const getData = async (params) => {

  beginDell.value = true;
  let data = {};
  data.page = params.page;
  data.limit = params.limit;
  // data.query = searchIpt.value
  data.source_platform = params.source_platform;
  if (params.query) {
    data.query = params.query;
  }
  console.log(data);
  try {
    let listRes = await getCollections(data);
    if (listRes.data.code === 200) {
      beginDell.value = false;
      results.value = listRes.data.data.data;
      if (results.value.length > 0) {
        results.value.forEach((item) => {
          item.activeName = "first";
          if(item.text){
            item.baseInfo = item.text
          }
          if(item.url){
            item.baseInfo = item.url
          }
          switch(item.source_platform){
            case 1:
            item.source_platform_text = '用户上传'
            break;
            case 2:
            item.source_platform_text = '微信公众号'
            break;
            case 3:
            item.source_platform_text = 'BiliBili哔哩哔哩'
            break;
            case 4:
            item.source_platform_text = '小红书'
            break;
            case 5:
            item.source_platform_text = '抖音'
            break;
            case 6:
            item.source_platform_text = '其他'
            break;
          }
        });
      }
    }
  } catch (e) {
    beginDell.value = false;
    ElMessage.error("错误，请检查输入或稍后再试");
  }
};

// 页面初始化
onMounted(() => {
  textIcon.value = "color-active";
  getRoasts()
  getData({ page: 1, limit: 10, source_platform: searchOption.value});
});

const radiochange = (e) => {
  if (e == "2") {
    scorllContainer.value.scrollTop =
      scorllContainer.value.scrollHeight -
      scorllContainer.value.offsetHeight +
      20;
    mainTopShow.value = true;
  } else {
    mainTopShow.value = true;
  }
};
// 文字,链接,图片切换和激活
const activeText = () => {
  active.value = 1;
  textIcon.value = "color-active";
  linkIcon.value = "normal";
  picIcon.value = "normal";
  collectionInfo.value = ''
  fileList.value = [];
};

const activeLink = () => {
  active.value = 2;
  textIcon.value = "normal";
  linkIcon.value = "color-active";
  picIcon.value = "normal";
  fileList.value = [];
  collectionInfo.value = ''
};

const activePic = () => {
  active.value = 3;
  textIcon.value = "normal";
  linkIcon.value = "normal";
  picIcon.value = "color-active";
  collectionInfo.value = ''
};

// 开始处理
const chatBegin = async () => {
  if (active.value == 1) {
    // 空内容判定
    if (!collectionInfo.value) {
      ElMessage.error("请输入需要收藏的文字内容");
      return;
    }
    // if (!userPrompt.value) {
    //   ElMessage.error("请输入处理要求");
    //   return;
    // }
    beginDell.value = true;
    let data = {};
    data.text = collectionInfo.value;
    if (userPrompt.value) {
      data.user_prompt = userPrompt.value;
    }
    //   开始处理
    try {
      let resText = await getText(data);
      if (resText.data.code === 200) {
        ElMessage.success("处理成功");
        getData({  page: 1, limit: 10, source_platform: searchOption.value,query:searchIpt.value});
        collectionInfo.value = "";
        if(!checked1.value){
          userPrompt.value = ''
        }
      } else {
        beginDell.value = false;
        ElMessage.error(resText.data.message);
      }
    } catch (e) {
      console.log(e);
      
      beginDell.value = false;
      ElMessage.error("错误，请检查输入或稍后重试");
    }
  }

  if (active.value == 2) {
    // 空内容判定
    if (!collectionInfo.value) {
      ElMessage.error("请输入需要收藏链接");
      return;
    }
    // if (!userPrompt.value) {
    //   ElMessage.error("请输入处理要求");
    //   return;
    // }
    beginDell.value = true;
    let data = {};
    data.url = collectionInfo.value;
    if (userPrompt.value) {
      data.user_prompt = userPrompt.value;
    }
    //   开始处理
    try {
      let resText = await getUrl(data);
      if (resText.data.code === 200) {
        ElMessage.success("处理成功");
        getData({ page: 1, limit: 10, source_platform: searchOption.value,query:searchIpt.value});
        collectionInfo.value = '';
        if(!checked1.value){
          userPrompt.value = ''
        }
      } else {
        beginDell.value = false;
        ElMessage.error(resText.data.message);
      }
    } catch (e) {
      console.log(e);
      
      beginDell.value = false;
      ElMessage.error("错误，请检查输入或稍后重试");
    }
  }
  if(active.value == 3){
    if(fileList.value.length <= 0){
      ElMessage.error('请先选择文件')
      return
    }
    let data = {}
      data.url = imgDataUrl.value
      if(userPrompt.value){
        data.user_prompt = userPrompt.value
      }
      let asRes = await imgAs(data)
      if(asRes.data.code == 200){
        ElMessage.success("处理成功");
        getData({ page: 1, limit: 10, source_platform: searchOption.value,query:searchIpt.value});
        imgDataUrl.value = ''
        fileList.value = []
        if(!checked1.value){
          userPrompt.value = ''
        }
      }else{
        beginDell.value = false;
        ElMessage.error("错误，请检查输入或稍后重试");
      }
      
  }
};

// 数据流式读取
const streamChat = async (content) => {
  backMessage.value = "";
  let info = reactive({});
  // 使用fetch更方便流式读取数据
  const params = {
    message: content.message ? content.message : "",
    collection_id: content.collection_id ? content.collection_id : 0,
  };
  const queryString = new URLSearchParams(params).toString();
  const url = `http://agentmiao.com/api/chat?${queryString}`;

  // 第一个await是等待后端返回响应头
  const resp = await fetch(url, {
    method: "GET",
    headers: {
      "Content-Type": "application/json",
      "X-token": JSON.parse(localStorage.getItem("token")),
    },
  });
  // 正常fetch接口这儿会又第二个await获取响应数据   流式读取为异步await放下面reader去读数据
  const reader = resp.body.getReader();
  // 文字解码器实例化
  const decoder = new TextDecoder();
  let reg = true;

  while (1) {
    const { done, value } = await reader.read();
    if (done) {
      sendLoading.value = false;
      break;
    }
    if (reg) {
      messageInfo.value.push(info);
      reg = false;
    }
    let text = decoder.decode(value);
    scorllContainer.value.scrollTop =
      scorllContainer.value.scrollHeight -
      scorllContainer.value.offsetHeight +
      20;

    text = text.replace(/data:/g, "").replace(/\s+/g, "");
    backMessage.value += text;
    info.answerText = backMessage.value;
  }
};

// 点击发送信息
const sendMessage = () => {
  sendLoading.value = true;
  let message = {};
  let data = {};
  message.userText = userSendMessage.value;
  messageInfo.value.push(message);
  data.message = userSendMessage.value;
  if(tempcollectionId.value){
    data.collection_id = tempcollectionId.value
  }
  userSendMessage.value = "";

  streamChat(data);
};
const beginScroll = (e) => {};
// const keyDown = () => {
//   sendMessage();
// };

// 讨论一下
const talkAbout = (e) => {
  let tempStr = "";
  if (e.summary) {
    let tempArr = e.summary.split("\n");
    if (tempArr.length > 0) {
      tempArr.forEach((item) => {
        if (item.includes("摘要:")) {
          tempStr = item.replace(/^摘要:\s*/, "");
        }
      });
    }
  }
  radio1.value = "2";
  mainTopShow.value = false;
  let data = {};
  data.collection_id = e.id;
  tempcollectionId.value = e.id
  sendLoading.value = true;
  topData.value = e.summary ? e : {};
  topData.value.zy = tempStr;
  streamChat(data);
};

// 返回
const backFirstChat = () => {
  tempcollectionId.value = 0
  mainTopShow.value = true;
  messageInfo.value = [];
  sendLoading.value = false;
};

// 
const sourceOptionsChange = () => {
  getData({  page: 1, limit: 10, source_platform: searchOption.value,query:searchIpt.value });
};
const handleChange = async(e)=>{
  let data = {}
  data.file = e.raw
  try{
    let uploadRes = await uploadImg(data)
    if(uploadRes.data.code == 200){
      imgDataUrl.value = uploadRes.data.data.url
    }
  }catch(e){
    ElMessage.error('错误，请检查输入或稍后重试')
  }
  
}

const keyDown = (e)=>{
  if (e.key === 'Enter') {
        getData({  page: 1, limit: 10, source_platform: searchOption.value,query:searchIpt.value })
    }
}

// 复制文本

const copyText = async(e)=>{
  try{
    await toClipboard(e)
    ElMessage.info('文本已复制')
  }catch(e){
    ElMessage.error('复制失败')
  }
}
</script>

<style lang="scss" scoped>
.right-icon {
  width: 40px;
  height: 40px;
}

.bb2d {
  border-bottom: 2px solid #ddd;
  padding: 20px 0;
}

.right-bg {
  width: 200px;
}

.left-menu {
  width: 25%;
  padding: 20px;
  height: 100%;
  background-color: #ced1d0;
}

.main {
  width: 100%;
  height: 100%;
  padding: 0;
  font-size: 16px;
}

.mention-text {
  width: 100%;
  border: 1px solid #bdbdbd;
  background-color: #fff;
  text-align: center;
  border-radius: 8px;
  padding: 5px;
}

.time-text {
  font-size: 20px;
  font-weight: 500;
}

.skeleton {
  background-color: #fff;
  padding: 5px;
}

.sk-text {
  padding: 5px 15px;
  white-space: nowrap;
  text-align: center;
  border: 1px solid #bdbdbd;
  font-size: 12px;
}

.bb2b {
  border-bottom: 2px solid #bdbdbd;
}

.chat-container {
  border: 1px solid #cecece;
  padding: 20px;
  border-radius: 8px;
  margin-top: 20px;
}

:deep(.el-checkbox__inner) {
  border-radius: 50% !important;
}

:deep(.el-checkbox__label) {
  color: #409eff;
}

:deep(.el-radio-button__inner) {
  border: 1px solid #ccc;
  border-radius: 8px !important;
}

.iconfont {
  cursor: pointer;
}

.normal {
  color: #2c2c2c;
}

.color-active {
  color: #1296db;
}

.collection-ipt {
  height: 35px;
  outline: none;
  border: none;
}

.right-main {
  height: 100%;
  background-color:#ced1d0;
  padding: 20px;
}

:deep(.el-textarea__inner) {
  box-shadow: none; //去除自带边框
  padding: 0;
  resize: none; //去除右下角的拖动角标
}

.focus {
  :deep(.el-textarea__inner) {
    box-shadow: none;
    resize: block;
    resize: none;
  }
}

:deep(.el-textarea__inner:hover) {
  box-shadow: none; //去除自带边框
  padding: 0;
  resize: none; //去除右下角的拖动角标
}

.message-box {
  border: 1px solid #ccc;
  padding: 5px;
  width: 70%;
  border-radius: 8px;
}

.collectionitem {
  background-color: #fff;
  padding: 10px;
  margin-bottom: 20px;
}
:deep(.el-card__body) {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
:deep(.el-tabs__header) {
  border: none !important;
  border-bottom: none !important;
  margin: 0 !important;
}
:deep(.el-tabs__nav) {
  border: none !important;
}
:deep(.el-tabs__item) {
  border-left: none !important;
  font-size: 16px;
  font-weight: 600;
}
:deep(.el-upload-list) {
  position: absolute;
  left: 0;
  top: 10px;
}
.searchIpt:focus{
  border: 1px sloid #1296db;
  outline: none;
}
:deep(.el-tabs){
  width: 100%;
}
// .overText{
//   max-width: 80%;
//   display: -webkit-box; //使用了flex，需要加
//   overflow: hidden;     //超出隐藏
//   word-break: break-all; //纯英文、数字、中文
//   text-overflow: ellipsis;  //省略号
//   -webkit-box-orient: vertical; //垂直
//   -webkit-line-clamp: 1;  //显示一行
//   white-space:pre-line;   //合并空白符序列，但是保留换行符。(如果要使用这个垂直和显示几行的代码也要写)
//                           //后来查资料发现应该是我的元素脱离文档流然后定义宽度无效  换行符失效导致的
// }
</style>
